<template>
	<coreshop-page title="佣金明细" mode="left">
		<view class="content-box">
			<view class="content" :style="{'top':`${statusBarHeight}px`}">
				<view class="header">
					<view class="total_box">
						<view class="earn">
							<view>
								<view class="label">总收益(元)</view>
								<view class="value">
									{{ state.showMoney ? `￥${state.info.totalSettlementAmount}` || '￥0.00' : '***' }}
								</view>
							</view>
							<view class="toggle" @click="state.showMoney = !state.showMoney">
								<uv-icon v-if="state.showMoney" name="eye" color="#ffffff" size="20"></uv-icon>
								<uv-icon v-else name="eye-off-outline" color="#ffffff" size="20"></uv-icon>
							</view>
						</view>

						<view class="withdraw"
							@click="handleRouteNavigateTo(`/pages/subpackage/member/balance/withdraw/index`)">提现</view>
					</view>
					<view class="commission_detail">
						<view class="item">
							<view class="label">待入账佣金</view>
							<view class="value">
								{{ state.showMoney ? `￥${state.info.freezeAmount}`  || '￥0.00' : '***' }}
							</view>
						</view>
						<view class="item">
							<view class="label">可提现金额</view>
							<view class="value">{{ state.showMoney ? `￥${state.userInfo.balance}`  || '￥0.00' : '***' }}
							</view>
						</view>
					</view>
				</view>
				<view class="filter">
					<view class="date" @click="onToggleVisibleCalendars()">
						<uv-icon :name="state.arrowUp?'arrow-up':'arrow-down'"></uv-icon>
						<view class="selected_date">{{state.selectedDate}}</view>
					</view>
					<view class="filter_total">收入：￥{{state.totalMoney}}</view>
				</view>
			</view>

			<view class="list" v-if="state.list.length > 0">
				<view class="item" v-for="item in state.list" :key="item.id">
					<view class="order-no">
						<text class="label">{{ item.typeName }}</text>
						<text class="value">订单编号：{{item.sourceId}}</text>
					</view>
					<view class="price">
						<text class="label">{{ item.money }}</text>
						<text class="value">{{timeFormat(item.createTime, 'yyyy.mm.dd')}}</text>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
			</view>
		</view>

		<uv-calendars ref="calendarsRef" mode="range" confirmColor="#D33123" color="#D33123" @confirm="confirmCalendars"
			@close="closeCalendars" />

	</coreshop-page>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { queryDistributionInfo, queryUserBalance, queryUserInfo } from '@/core/api';
	import type { Response, UserInfoType } from '@/core/models';
	import { EmptyEnum } from '@/core/enum';
	import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { useSystemInfo } from '@/core/hooks';

	/** 获取自定义导航栏高度 */
	const { statusBarHeight } = useSystemInfo();

	const calendarsRef = ref();
	const nowTimeStamp = new Date().getTime()

	const state = reactive<{
		selectedDate : string;
		arrowUp : boolean;
		showMoney : boolean;
		info : any;
		page : number;
		totalPages : number;
		list : Array<any>;
		totalMoney : number;
		userInfo : UserInfoType,
	}>({
		selectedDate: timeFormat(nowTimeStamp) + '至' + timeFormat(nowTimeStamp),
		arrowUp: false,
		showMoney: false,
		info: {},
		page: 1,
		totalPages: 1,
		list: [],
		totalMoney: 0,
		userInfo: {},
	});

	onLoad(() => {
		getUserInfo();
		getDistributionInfo();
		getUserBalance();
	});

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getUserBalance();
		}
	});

	/** 获取用户信息 */
	const getUserInfo = async () => {
		const userInfo : Response<UserInfoType> = await queryUserInfo();
		state.userInfo = userInfo?.data;
	}

	/** 获取分销商进度状态 */
	const getDistributionInfo = async () => {
		const info : Response<any> = await queryDistributionInfo();
		if (info.status) {
			state.info = info.data;
		} else {
			handleShowToast(info.msg)
		}
	}

	/** 获取余额明细 */
	const getUserBalance = async () => {
		const balance : Response<Array<any>> = await queryUserBalance({
			id: 5,
			page: state.page,
			limit: 10,
			propsDate: state.selectedDate
		})
		if (balance.status) {
			state.totalMoney = balance.otherData.sunMoney;
			state.totalPages = balance.otherData?.totalPages;
			state.list = state.list.concat(balance.data);
		}
	}

	/** 打开时间选择弹框 */
	const onToggleVisibleCalendars = () => {
		state.arrowUp = true;
		calendarsRef.value?.open();
	}

	/** 选择时间 */
	const confirmCalendars = (e : any) => {
		state.selectedDate = e.range.data[0] + '至' + e.range.data[1];
		state.page = 1;
		state.list = [];
		getUserBalance();
	}

	/** 关闭时间选择弹框 */
	const closeCalendars = () => {
		state.arrowUp = false;
	}
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>